<script>

export default {
  name: 'DefaultComponent',
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
  },
  computed: {},
  methods: {
    handleOpen(key, keyPath) {
    },
    handleClose(key, keyPath) {
    },

    getUrl(value) {
      return require(`@/assets/icons/svg/${value}.svg`)
    },


  }
}
</script>

<template>
  <div>
    <div v-for="item in data">
      <!--   item.menuType=='M' M--目录  C--菜单 -->
      <el-submenu :key="item.id" :index="item.path+''" v-if="item.menuType=='M'" style="font-size: 50px">
        <template slot="title" v-if="item.children">
          <img :src="getUrl(item.icon)" style="width: 20px;height: 20px" v-if="item.icon!=null&&item.icon!=''">
          <span style="margin-left: 20px">{{ item.menuName }}</span>
        </template>
        <DefaultComponent v-if="item.menuType=='M'" :data="item.children" ></DefaultComponent>
      </el-submenu>
      <template v-if="item.menuType=='C'">
          <el-menu-item :index="item.path+''">
            <img :src="getUrl(item.icon)" style="width: 20px;height: 20px" v-if="item.icon!=null&&item.icon!=''">
            <span style="margin-left: 20px">{{ item.menuName }}</span>
          </el-menu-item>
      </template>
    </div>
  </div>


  <!--  <div>-->
  <!--    <el-submenu v-for="item in data" :key="item.id" :index="item.menuId">-->
  <!--        <template slot="title" v-if="item.children">-->
  <!--          <i  class="el-icon-location"></i>-->
  <!--&lt;!&ndash;          <img  :src="'@/assets/icons/svg/'+item.icon+'.svg'">&ndash;&gt;-->
  <!--          <span>{{item.menuName}}</span>-->
  <!--        </template>-->
  <!--&lt;!&ndash;      <el-menu-item v-else index="item.menuId">{{item.menuName}}</el-menu-item>&ndash;&gt;-->
  <!--      <DefaultComponent v-if="item.children.length>0" :data="item.children"></DefaultComponent>-->
  <!--    </el-submenu>-->
  <!--  </div>-->

</template>

<style>
el-submenu {
  background-color: antiquewhite;
  color: #42b983;
}

el-menu-item {
  background-color: aqua;
}

</style>